<template>
  <view class="main-header">
    <text>{{ $t("服务分析") }}</text>
  </view>
  <view class="main-pingfen">
    <view class="identifylabelids-button">
      <view class="identifylabelids-button-item">
        <uv-button :custom-style="miniButton" :color="red_selected === p.id ? '#748ee2' : '#aaaaaa'" text="概览"
          @click="red_selected = p.id">
        </uv-button>
      </view>
      <view v-for="(v, i) in redlist" :key="i" class="identifylabelids-button-item">
        <uv-button :custom-style="miniButton" :color="red_selected === v.id ? '#748ee2' : '#aaaaaa'" :text="v?.name"
          @click="red_selected = String(v.id)"></uv-button>
      </view>
    </view>
  </view>
  <view class="container">
    <slot :show="show && showred" id="mychart-dom-red" canvasId="mychart-red"
      :ec="{ onInit: (canvas: any, width: string | number, height: string | number, dpr: number) => setred(canvas, width, height, dpr) }">
    </slot>
  </view>
</template>

<script setup lang="ts">
import { miniButton } from "@/util/style";
import { computed, ref, shallowRef, watch } from "vue";
import { getchildrenlast } from "@/util";
//@ts-ignore
const echarts = require("../../wxcomponents/ec-canvas/echarts");
import { nextTick } from "vue";
import { useI18n } from "vue-i18n";
const $t = useI18n().t;
type Ip = {
  id: string;
  list: Eps.identifylabelEntity[];
  change(
    identifycommentlabels: string[],
    p?: number,
    d?: number
  ): {
    xAxisdata: string[];
    name: string[];
    series: {
      value: number;
      type: string;
      date: string;
      name: string;
      color: string;
    }[][];
    data: {
      value: number;
      type: string;
      date: string;
      name: string;
      color: string;
    }[];
    parent: {
      count: number;
      name: string;
      id1: string | undefined;
      id2: string | undefined;
      value: number;
    }[];
    parent2: {
      count: number;
      name: string;
      id1: string | undefined;
      id2: string | undefined;
      value: number;
    }[];
  };
  show: boolean;
};

const p = defineProps<Ip>();

const chart = shallowRef();

const showred = ref(true);
const red_identifycommentlabels = ref<string[]>([]);

const red_selected = ref<string>(p.id);

const redlist = computed(() => {
  const data = p.list
    .filter((c) => String(c.parentId) === p.id)
    .sort((a, b) => Number(a.orderNum) - Number(b.orderNum));
  return data;
});

function setred(
  canvas: any,
  width: string | number,
  height: string | number,
  dpr: number
) {
  chart.value = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });

  chart.value.setOption(setoption(), { notMerge: true });
  canvas.setChart(chart.value);
  chart.value.on("click", click);
  return chart.value;
}

function setoption() {
  red_identifycommentlabels.value = getchildrenlast(
    p.list.find((c) => String(c.id) === red_selected.value)?.children
  ).map((e) => e.id);
  const color = [
    "rgba(112, 48, 160, 0.03)",
    "rgba(242, 242, 242, 0.2)",
    "rgba(198, 95, 16, 0.03)",
  ];
  const color2 = [
    "rgba(112, 48, 160, 1)",
    "rgba(0, 32, 96, 1)",
    "rgba(198, 95, 16, 1)",
  ];

  const option: Record<string, any> = {
    color: ["#FD754C", "#aaaaaa"],
    title: false,
    legend: {
      top: "top",
      left: "left",
      data: ["当前周期", "上一周期"],
      selected: {
        "上一周期": false  // 将 "Lowest" 设置为默认不选中
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1", "2", "3", "4"],
      axisLabel: false,
      position: "top",
      nameTextStyle: {
        verticalAlign: "middle",
        width: 16,
      },
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "100%"],
      inverse: true,
      minInterval: 1,
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
        show: false,
      },
      {
        start: 0,
        end: 100,
        backgroundColor: "#fff",
        dataBackground: {
          lineStyle: {
            color: "#FD754C",
          },
          areaStyle: {
            color: "#FD754C",
          },
        },
        selectedDataBackground: {
          lineStyle: {
            color: "#FD754C",
          },
          areaStyle: {
            color: "#FD754C",
          },
        },
        fillerColor: "#FD754C",
        show: false,
      },
    ],
    series: [
      {
        name: "当前周期",
        type: "line",
        data: [],
        markArea: {
          data: [],
        },
        label: {
          show: true,
          formatter: (value: any) => {
            return p.list
              .find((c) => c.id == value.name)
              ?.name?.split("")
              .join("\n");
          },
          verticalAlign: "right",
          offset: [-5, 0],
          align: "left",
          position: "bottom",
          distance: 15,
        },
        z: 2,
      },
      {
        name: "上一周期",
        type: "line",
        data: [],
        z: 1,
      },
    ],
  };

  if (red_selected.value === p.id) {
    const { parent, xAxisdata, series, name, data } = p.change(
      red_identifycommentlabels.value,
      2,
      1
    );
    option.xAxis.data = xAxisdata;
    option.series[0] = {
      name: "当前周期",
      type: "line",
      data: series[0].map((e, k) => {
        return {
          name: e.date,
          value: e.value,
          label: {
            color: e.color,
          },
        };
      }),
      markArea: {
        data: parent.map((e, k) => {
          return [
            {
              name: e.name,
              xAxis: e.id1,
              itemStyle: {
                color: color[k % 3],
                borderDashOffset: -10,
              },
              label: {
                color: color2[k % 3],
              },
            },
            {
              xAxis: e.id2,
              itemStyle: {
                borderDashOffset: 10,
              },
            },
          ];
        }),
      },
      label: {
        show: true,
        formatter: (value: any) => {
          return p.list
            .find((c) => c.id == value.name)
            ?.name?.split("")
            .join("\n");
        },
        verticalAlign: "right",
        offset: [-5, 0],
        align: "left",
        position: "bottom",
        distance: 15,
      },
      z: 2,
    };
    option.series[1] = {
      name: "上一周期",
      type: "line",
      data: series[1].map((e, k) => {
        return {
          name: e.date,
          value: e.value,
          label: {
            color: e.color,
          },
        };
      }),
      z: 1,
    };
  } else {
    const { parent, xAxisdata, series, name, data } = p.change(
      red_identifycommentlabels.value,
      1,
      0
    );
    option.xAxis.data = xAxisdata;
    option.dataZoom[0].end = 100 / (xAxisdata.length / 10);
    option.series[0] = {
      name: "当前周期",
      type: "line",
      data: series[0].map((e, k) => {
        return {
          name: e.date,
          value: e.value,
          label: {
            color: e.color,
          },
        };
      }),
      markArea: {
        data: parent.map((e, k) => {
          return [
            {
              name: e.name,
              xAxis: e.id1,
              itemStyle: {
                color: color[k % 3],
                borderDashOffset: -10,
              },
              label: {
                color: color2[k % 3],
              },
            },
            {
              xAxis: e.id2,
              itemStyle: {
                borderDashOffset: 10,
              },
            },
          ];
        }),
      },
      label: {
        show: true,
        formatter: (value: any) => {
          return p.list
            .find((c) => c.id == value.name)
            ?.name?.split("")
            .join("\n");
        },
        verticalAlign: "right",
        offset: [-5, 0],
        align: "left",
        position: "bottom",
        distance: 15,
      },
      z: 2,
    };
    option.series[1] = {
      name: "上一周期",
      type: "line",
      data: series[1].map((e, k) => {
        return {
          name: e.date,
          value: e.value,
          label: {
            color: e.color,
          },
        };
      }),
      z: 1,
    };
  }
  return option;
}

function click(e: any, selected?: string) {
  if (e.componentSubType == "bar") {
    const n = p.list.find(
      (z) => String(z.parentId) === red_selected.value && z.name === e.name
    );
    if (n) {
      red_selected.value = String(n.id);
    }
  }
}

watch(
  () => red_selected.value,
  (e) => {
    nextTick(() => {
      chart.value.setOption(setoption(), { notMerge: true });
    });
  }
);
</script>
